<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { useBooleanStore } from '@/store';
import { done } from 'nprogress';
import { saveOrUpdateLocation } from '@/api/les';
import { Notification } from '@arco-design/web-vue';
import { getName, getUserJob } from '@/utils/auth';

const showDrawer = ref<boolean>(false);
const formRef = ref<any>();
const booleanStore = useBooleanStore();
const title = ref<string>('线边库位');

const formModel = reactive({
  id: undefined,
  code: '',
  type: 5,
  columnLoc: '',
  rowLoc: '',
  isOccupied: 0,
  occupiedCode: '',
  port: '',
  allocatedDate: '',
  inboundDate: '',
  outboundDate: '',
  createUser: '',
  updateUser: '',
  area: '',
});

const rules = {
  code: [
    {
      required: true,
      message: '请输入库位编码',
    },
  ],
  port: [
    {
      required: true,
      message: '请输入站点地址',
    },
  ],
  columnLoc: [
    {
      required: true,
      message: '请输入库位列',
    },
  ],
  rowLoc: [
    {
      required: true,
      message: '请输入库位排',
    },
  ],
};

function afterVisibleChange(val: any) {
  if (!val) {
    booleanStore.toggleBool(107);
  }
}

function handleCancel() {
  formRef.value?.resetFields();
  booleanStore.toggleBool(107);
}

async function handleOk() {
  const res = await formRef.value.validate();
  if (res) {
    done(false);
  } else {
    if (title.value === '新增线边库位') {
      formModel.createUser = getName() as string;
      formModel.area = '17180';
    } else formModel.updateUser = getName() as string;
    const data = await saveOrUpdateLocation(formModel);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
      booleanStore.toggleBool(107);
      booleanStore.watchUpdate(108);
      Object.assign(formModel, {
        id: undefined,
        code: '',
        type: 5,
        columnLoc: '',
        rowLoc: '',
        isOccupied: 0,
        occupiedCode: '',
        port: '',
        allocatedDate: '',
        inboundDate: '',
        outboundDate: '',
      });
      done();
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
  }
}

// 监听弹框
watch(
  () => booleanStore.boolValue,
  (newValue: boolean) => {
    if (!newValue) {
      showDrawer.value = newValue;
      return;
    }
    if (booleanStore.num === 107) {
      title.value = '新增线边库位';
      showDrawer.value = newValue;
    } else if (booleanStore.num === 108) {
      title.value = '修改线边库位';
      formModel.id = booleanStore.row.id;
      formModel.code = booleanStore.row.code;
      formModel.columnLoc = booleanStore.row.columnLoc;
      formModel.rowLoc = booleanStore.row.rowLoc;
      formModel.occupiedCode = booleanStore.row.occupiedCode;
      formModel.port = booleanStore.row.port;
      showDrawer.value = newValue;
    }
  }
);
</script>

<template>
  <a-drawer
    width="30%"
    :height="340"
    :visible="showDrawer"
    placement="right"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
    @before-ok="handleOk"
  >
    <template #title> {{ title }} </template>
    <a-form ref="formRef" :model="formModel" :rules="rules">
      <a-form-item label="库位编码" field="code">
        <a-input
          v-model="formModel.code"
          max-length="20"
          placeholder="请输入库位编码"
        />
      </a-form-item>
      <a-form-item label="列" field="columnLoc">
        <a-input
          v-model="formModel.columnLoc"
          max-length="50"
          allow-clear
          placeholder="请输入库位列"
        />
      </a-form-item>
      <a-form-item label="排" field="rowLoc">
        <a-input
          v-model="formModel.rowLoc"
          max-length="50"
          allow-clear
          placeholder="请输入库位排"
        />
      </a-form-item>
      <a-form-item label="占用编码" field="occupiedCode">
        <a-input
          v-model="formModel.occupiedCode"
          max-length="50"
          allow-clear
          placeholder="请输入占用编码"
        />
      </a-form-item>
      <a-form-item label="站点地址" field="port">
        <a-input
          v-model="formModel.port"
          max-length="20"
          placeholder="请输入站点地址"
        />
      </a-form-item>
    </a-form>
    <!-- <template #footer>
      <div class="flex-btn">
        <a-button type="primary" @click="handleOk">确认</a-button>
        <a-button class="btn-reset" @click="handleCancel">取消</a-button>
      </div>
    </template> -->
  </a-drawer>
</template>
